<template>
<div>
<div class="common-layout">
    <el-container>
      <el-aside width="200px" height="150px"  class="info">
        <img :src="data.picpath">
      </el-aside>
      <el-container>
        <el-header  height="150px">
            <el-card>
    <el-row :gutter='20' class="header">
        <el-col :span='7'>
            <h1>{{route.query.officename}}</h1>
        </el-col>
    </el-row>
  <div>
    <el-descriptions :title="data.dname" class="margin-top:100px"
    :column="3"
    :size="large"
    border>
    <template #extra>
      </template>
        <el-descriptions-item label="科室" >{{data.officename}}</el-descriptions-item>
        ]<el-descriptions-item label="诊室" >{{data.room}}</el-descriptions-item>
        <el-descriptions-item label="职务" >{{data.career}}</el-descriptions-item>
        <el-descriptions-item label="接诊次数" >{{data.count}}</el-descriptions-item>
        <el-descriptions-item label="费用" >{{data.fee}}</el-descriptions-item>
        <el-divider />
    </el-descriptions>
  </div>

  </el-card>
</el-header>
          <div class="abc">
            <el-main  height="200px">
            <h1>介绍</h1>
            <p>{{data.description}}</p>
        </el-main>
          </div>
      </el-container>
    </el-container>
  </div>
    <div class="common-layout is-vertical" style="margin-top:100px">
        <el-container>
        <el-header>
          <h1>当前日期为：{{date}}</h1>
           <el-radio-group v-model="radio1" size="large">
            <el-radio-button :label="index.week" v-for="(index, item) in weeks" :key="item" @click="handleClick(index.time)"/>
          </el-radio-group>
        </el-header>
        <el-main>
          <el-select v-model="value" class="m-2" placeholder="请选择预约时段" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
          <el-button type="primary" @click="handleDialogValue()">预约</el-button>
        </el-main>
        </el-container>
    </div>
</div>
 <Dialog v-model = "dialogVisible" :dialogTitle="dialogTitle" v-show="dialogVisible" @initUserList = "initGetUsers" :dialogTableValue="dialogTableValue"/>
</template>

<script setup>
import Dialog from './components/dialog'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getDoctor, getWorktime, postYuyue } from '@/api/yuyue1-2.js'

const handleDialogValue = () => {
        dialogTitle.value = '请确认您的信息'
        dialogVisible.value = true
        dialogTableValue.value = { doctor: data.value, worktime: thisTime.value, time: value.value }
}

const dialogTitle = ref('')
const dialogVisible = ref(false)
const dialogTableValue = ref({})

const radio1 = ref('New York')
const weeks = ref(['周日', '周一', '周二', '周三', '周四', '周五', '周六'])

const date = ref('')

const route = useRoute()
const data = ref([])
const initDatas = async() => {
    const res = await getDoctor(route.query.dname)
    data.value = res.data.datas[0]
}
initDatas()

const paddingZero = function (n) {
    if (n < 10) {
      return '0' + n
    } else {
      return n
    }
}
const getWeekDay = function () {
    const myDate = new Date()
    const year = myDate.getFullYear()
    const week = ['日', '一', '二', '三', '四', '五', '六']
    date.value = year + '-' + paddingZero((myDate.getMonth() + 1)) + '-' + paddingZero(myDate.getDate())
    myDate.setDate(myDate.getDate() + 1)
    let dateTemp
    const timeArr = []
    let times
    for (let i = 0; i < 7; i++) {
      times = year + '-' + paddingZero((myDate.getMonth() + 1)) + '-' + paddingZero(myDate.getDate())
      dateTemp = myDate.getDate()
      timeArr.push({ week: week[myDate.getDay()], day: dateTemp, time: times })
      myDate.setDate(myDate.getDate() + 1)
    }
    weeks.value = timeArr
}
getWeekDay()

const thisTime = ref(date.value)

const handleClick = (time) => {
  thisTime.value = time
}

const options = ref([])

const value = ref('')
const getTime = async() => {
  const res = await getWorktime(data.value.dname, thisTime.value)
  for (var i = 0; i < res.data.datas.length; i++) {
    options.value.push(res.data.datas[i].time)
  }
  console.log(options.value)
}
watch(() => thisTime, () => {
  getTime()
}, { deep: true })

</script>

<style lang="scss">
.info img{
    height: 180px;
    width: 150px;
}
.abc{
    margin-top:20px;
    border: 1px solid;
    margin-left:10px;
    border-color:rgb(195, 189, 189)
}
.choose-time-middle{
  width: 100%;
  height: 120rpx;
  padding: 10rpx 0 20rpx 0;
  background-color: #fff;
}
.date view{
  float: left;
  width: 14%;
  padding-top: 10rpx;
  text-align: center;
}
.date view button{
  padding: 0;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  background-color: #fff;
  border-radius: 50%;
}
.date view button.active{
  background-color: #009ee6;
  color: #fff;
}
.date view button::after{
  border: none;
}
.show-date{
  width: 100%;
  text-align: center;
  padding: 50rpx 0rpx;
}
</style>
